<template>
  <view class="broadcast_box" v-if="is_loading">
    <template v-if="list.length > 0">
      <view class="broadcast" v-for="(item, index) of list" :key="index">
        <view class="broadcast_left">
          <image
            :src="item.cover_img"
            mode="aspectFill"
            class="broadcast_left_img"
          ></image>
          <view class="left_top">
            <template v-if="item.live_status == 103">
              <view
                style="
                  width: 44rpx;
                  height: 32rpx;
                  border-radius: 16px 8px 8px 16px;
                  background: #12cb82;
                  padding-left: 6rpx;
                  margin-right: 8rpx;
                "
              >
                <image :src="images.wxlive.p2"></image>
              </view>
            </template>
            <template v-else>
              <view
                style="
                  width: 44rpx;
                  height: 32rpx;
                  border-radius: 16px 8px 8px 16px;
                  background: #f40a2a;
                  padding-left: 6rpx;
                  margin-right: 8rpx;
                "
              >
                <image
                  style="
                    background: red;
                    width: 30rpx;
                    height: 20rpx;
                    position: relative;
                    top: 2px;
                  "
                  mode="aspectFit"
                  :src="images.wxlive.p3"
                >
                </image>
              </view>
            </template>
            <view>
              <template v-if="item.live_status == 103"> {{$t('live.replay')}} </template>
              <template v-else> ID: {{ item.roomid }} </template>
            </view>
          </view>
          <view class="left_bottom">
            <image :src="images.wxlive.p1"></image>
            <image
              :src="images.wxlive.play"
              style="width: 30rpx; height: 20rpx; top: 76rpx; left: 20rpx"
            >
            </image>
            <view v-if="item.live_status == 103">
              <text style="margin-right: 10rpx">{{$t('live.time')}}</text>
              <text>{{ item.time }}</text>
            </view>
            <view v-else>
              <text>{{ item.time }}</text>
            </view>
            <button
              open-type="share"
              :data-item="item"
              style="
                width: 40rpx;
                height: 40rpx;
                border-radius: 0px;
                display: inline;
                background: rgba(0, 0, 0, 0);
                z-index: 999999999;
                border: none;
              "
              role="button"
              aria-disabled="false"
            >
              <image
                :src="images.wxlive.skip"
                style="width: 40rpx; height: 40rpx; left: 320rpx"
              >
              </image>
            </button>
          </view>
        </view>
        <view class="broadcast_right" @click="onClickLive(item)">
          <view class="right_title">
            {{ item.name }}
          </view>
          <view class="right_user">
            <view>{{ item.anchor_name }}</view>
          </view>
          <view class="right_shop" v-if="item.goods.length > 0">
            <view class="shopa">
              <image :src="item.goods[0].cover_img"></image>
              <view class="shop_pri">￥{{ item.goods[0].price }}</view>
            </view>
            <view class="shopb" v-if="item.goods.length > 1">
              <image :src="item.goods[1].cover_img"></image>
              <view class="shop_num">
                <text>{{ item.goods.length }}</text>
                <text>宝贝</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="loadmore">
        <u-loadmore @loadmore="getList" :status="status" />
      </view>
    </template>
    <template v-else>
      <u-empty :text="$t('live.noRoom')" mode="list"></u-empty>
    </template>
  </view>
</template>

<script>
let livePlayer = requirePlugin("live-player-plugin");
import wxliveApi from "@/api/wxlive.js";

export default {
  data() {
    return {
      is_loading: false,
      images: null,
      list: [],
      page: 1,
      total: 0,
      status: "loadmore",
      errorMessage: {
        104: this.$t('live.disabled'),
        107: this.$t('live.overdue'),
      },
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: this.$t("title.live"),
    });
    if (option.room_id) {
      wx.navigateTo({
        url:
          "plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=" +
          option.room_id,
      });
    }
    this.images = this.$store.getters.images;
    this.getList();
  },
  onReachBottom() {
    if (this.list.length < this.total) {
      this.getList();
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getList();
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (t) {
    const user = uni.getStorageSync("userInfo");
    if (t.from == "menu") {
      return {
        path: "/wxlive/live/live?user_id=" + (user ? user.id : 0),
        title: this.$t('live.look'),
        success: function (t) {},
      };
    } else {
      let item = t.target.dataset.item;
      return {
        path:
          "/wxlive/live/live?room_id=" +
          item.roomid +
          "&user_id=" +
          (user ? user.id : 0),
        imageUrl: item.cover_img,
        title: item.name,
        success: function (t) {},
      };
    }
  },
  methods: {
    getList: function () {
      this.status = "loading";
      wxliveApi
        .get_list({
          page: this.page,
        })
        .then((res) => {
          if (res.code == 0) {
            if (this.page == 1) {
              this.list = [];
            }
            this.list = this.list.concat(res.data.list);
            this.total = res.data.total;
            if (this.list.length < res.data.total) {
              this.page++;
            }
            if (this.list.length == res.data.total) {
              this.status = "nomore";
            } else {
              this.status = "loadmore";
            }
            uni.stopPullDownRefresh();
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
            });
          }
          this.is_loading = true;
        });
    },
    onClickLive: function (item) {
      if (this.errorMessage.hasOwnProperty(item.live_status)) {
        wx.showToast({
          title: this.errorMessage[item.live_status],
          icon: "none",
        });
        return;
      }
      wx.navigateTo({
        url:
          "plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=" +
          item.roomid,
      });
    },
  },
};
</script>

<style scoped>
.broadcast_box {
  min-height: 100vh;
  background-color: #f0f0f0;
  padding: 24rpx;
}

.broadcast {
  display: flex;
  margin-bottom: 24rpx;
}

.broadcast_left {
  width: 55%;
  height: 330rpx;
  border-top-left-radius: 12rpx;
  border-bottom-left-radius: 12rpx;
  position: relative;
  overflow: hidden;
}

.broadcast_left .left_top {
  width: 134rpx;
  height: 32rpx;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #fff;
  border-radius: 25rpx;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
}

.broadcast_left .left_top block {
  width: 44rpx;
  height: 32rpx;
}

.broadcast_left .left_top image {
  width: 32rpx;
  height: 32rpx;
}

.broadcast_left .left_bottom,
.broadcast_left .left_bottom image {
  width: 100%;
  height: 130rpx;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
}

.broadcast_left .left_bottom {
  font-size: 22rpx;
  color: #fff;
  line-height: 170rpx;
}

.broadcast_left .left_bottom view {
  padding-left: 20rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.broadcast_left .left_bottom view text {
  position: relative;
  left: 40rpx;
}

.broadcast_left .broadcast_left_img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.broadcast_right {
  background-color: #fff;
  width: 45%;
  height: 330rpx;
  border-top-right-radius: 12rpx;
  border-bottom-right-radius: 12rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  padding-left: 22rpx;
  padding-right: 30rpx;
  box-sizing: border-box;
}

.broadcast_right .right_title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
}

.broadcast_right .right_user {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  margin-top: 20rpx;
}

.broadcast_right .right_user image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50rpx;
  margin-right: 13rpx;
  border: 1rpx solid #b6b6b6;
}

.broadcast_right .right_user view {
  color: #666;
  font-size: 24rpx;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.right_shop {
  display: flex;
  margin-top: 40rpx;
}

.right_shop .shopa {
  margin-right: 10rpx;
}

.right_shop .shopa .shop_pri {
  position: absolute;
  width: 126rpx;
  bottom: 0;
  left: 0;
  height: 40rpx;
  line-height: 40rpx;
  color: #fff;
  font-size: 22rpx;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 6rpx 6rpx;
}

.right_shop > view {
  width: 126rpx;
  height: 126rpx;
  background-color: #eee;
  border-radius: 6rpx;
  position: relative;
}

.right_shop > view > image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.right_shop .shopb .shop_num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6rpx;
  top: 0;
  left: 0;
  z-index: 99;
}

.broadcast_tip {
  text-align: center;
  width: 100%;
  font-size: 22rpx;
  color: #888;
  padding: 10rpx 0;
}

.live_tips {
  text-align: center;
  font-size: 30rpx;
  color: #888;
  padding: 30rpx 0;
}

.video {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999;
}

.video video {
  width: 100%;
  height: 100%;
}

.video_close {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 1;
}

.video_close image {
  width: 100%;
  height: 100%;
}

button::after {
  border: none;
}

.loadmore {
  margin: 20rpx 0;
}
</style>
